import { React, useRef, useState } from 'react';
import '../../../index.css';
import './orderto.css';
import { Rate, message } from 'antd';
import { useLocation } from 'react-router';
import axios from 'axios';
import InterIP from '../../../IP/IP';



export default function Orderto() {

    const data = useLocation()
    var bigArr = []
    data.state.data.product.forEach((v, k) => {
        bigArr.push(v);
    })
    let timeData = new Date(+new Date() + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
    const pingjia = useRef();
    const [counts, setCounts] = useState();

    function xingxing(count) {
        setCounts((counts) => counts = count)
    }



    function addEvaluate() {
        var userID = document.cookie.slice(5);
        let IP = InterIP().props.children;
        axios.post("http://" + IP + ":3000/user/selUser", {
            user_id: userID,
        })
            .then((res) => {
                // console.log(pingjia.current.value);
                // console.log(counts);
                axios.post("http://" + IP + ":3000/user/addEvaluate", {
                    evaluate_text: pingjia.current.value,
                    user_name: res.data[0].nickname,
                    user_header: res.data[0].user_header,
                    user_score: counts,
                    product_id: data.state.data.product[0].product_id,
                    order_id: data.state.data.order_id[0],
                    evaluate_time: timeData,
                })
                    .then((res) => {
                        message.success('评价成功')
                    })
            })
    }



    return (
        <div id="orderto">
            <div className="orderto_top">订单评价</div>
            <div className="orderto_main">

                {bigArr.map((data, k) => {
                    return (
                        <div className="orderto_cargo" key={k}>
                            <div className="orderto_cargo_left">
                                <div className="orderto_img"><img src={data.product_img} alt=""></img></div>
                                <div>{data.product_name}</div>
                            </div>
                            <div className="orderto_cargo_right">
                                <div>
                                    <span>商品评分</span>
                                    <Rate onChange={xingxing} />
                                </div>
                                <div>
                                    <div><span>评价商品</span></div>
                                    <textarea className='orderto_text' ref={pingjia}></textarea>
                                </div>
                            </div>
                        </div>
                    )
                })}


                <div className="orderto_appraise">
                    <button onClick={addEvaluate}>提交评价</button>
                </div>

            </div>
        </div>
    )
}
